<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=1170781
-->
<head>
  <meta charset="utf-8">
  <title>Test that 'contain: paint' updates 'display' correctly</title>
  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
  <script type="text/javascript" src="property_database.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
</head>
<body>
  <div id="test" style="contain: paint"></div>
  <script>
  // This mapping is currently mostly based off of a bugzilla comment by Tab
  // Atkins Jr. in bug 1179349. Ultimately, it should be based on a
  // specification.

  // XXX 'ruby[-*]' and 'run-in' might need to be added here.
  var expectedChanges = {
    'inline'              : 'inline-block',
  };
  var displayInfo = gCSSProperties["display"];
  var test = document.getElementById('test');
  var displayVals = displayInfo.initial_values.concat(displayInfo.other_values);
  for (dispVal of displayVals) {
    test.style.display = dispVal;
    if (expectedChanges.hasOwnProperty(dispVal)) {
      is(getComputedStyle(test).display, expectedChanges[dispVal],
          `'contain: paint' should change 'display: ${dispVal}' to ` +
          `'display: ${expectedChanges[dispVal]}'`);
    } else {
      is(getComputedStyle(test).display, dispVal,
          `'contain: paint' should not change 'display: ${dispVal}'`);
    }
  }
  </script>
</body>
</html>
